<template>
    <div>
        <!--卡片-->
        <el-card class="box-card">
            <!--定义面包屑-->
            <el-breadcrumb separator=">">
                <el-breadcrumb-item :to="{ path: '/master' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>系统管理</el-breadcrumb-item>
                <el-breadcrumb-item>角色管理</el-breadcrumb-item>
            </el-breadcrumb>
            <el-divider></el-divider>
            <!--表单的搜索框
                 :model="双向绑定表单的数据"
            -->
            <el-form :inline="true" :model="roleFormData"  class="demo-form-inline">
                <el-form-item >
                    <el-input v-model="roleFormData.roleName" placeholder="请输入名称"></el-input>
                </el-form-item>
                <el-form-item >
                    <el-date-picker
                            v-model="roleFormData.startDate"
                            type="date"
                            placeholder="选择开始日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item >
                    <el-date-picker
                            v-model="roleFormData.endDate"
                            type="date"
                            placeholder="选择结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary"  @click="initRoleTable">查询</el-button>
                    <el-button type="primary" @click="editRoleDialog=true">添加</el-button>
                </el-form-item>
            </el-form>

            <!--数据表格-->
            <template>
                <el-table
                        :data="tableData"
                        :border="true"
                        stripe
                        style="width: 100%">
                    <el-table-column
                            prop="roleId"
                            label="编号"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="roleName"
                            label="角色名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="状态">
                        <template slot-scope="scope">
                            <el-switch
                                    v-model="scope.row.status"
                                    active-color="#13ce66"
                                    active-value="0"
                                    inactive-value="1"
                                    inactive-color="#ff4949"
                                    @change="switchStatus(scope.row.roleId,$event)">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="createBy"
                            label="创建人">
                    </el-table-column>
                    <el-table-column
                            prop="createTime"
                            label="创建时间">
                    </el-table-column>
                    <el-table-column
                            prop="updateBy"
                            label="更新人">
                    </el-table-column>
                    <el-table-column
                            prop="updateTime"
                            label="修改时间">
                    </el-table-column>

                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-edit" circle @click="selById(scope.row.roleId)" ></el-button>
                            <el-button type="danger" icon="el-icon-delete" circle @click="del(scope.row.roleId)" ></el-button>
                            <el-button type="warning" icon="el-icon-menu" circle @click="showRoleMenu(scope.row.roleId)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--分页-->
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </template>
        </el-card>
        <!--分配菜单的弹出框-->
        <el-dialog
                title="分配角色菜单"
                :visible.sync="fenMenuDialog"
                width="30%"
                >
            <el-tree
                    :data="menus"
                    show-checkbox
                    node-key="menuId"
                    ref="menuTree"
                    :default-expanded-keys="roleMenuIds"
                    :props="defaultProps">
            </el-tree>

            <span slot="footer" class="dialog-footer">
            <el-button @click="fenMenuDialog = false">取 消</el-button>
            <el-button type="primary" @click="confirmFenMenu">确 定</el-button>
          </span>
        </el-dialog>
        <!--                更新角色信息表单-->
        <el-dialog
                title="添加角色"
                :visible.sync="editRoleDialog"
                width="30%"
                :before-close="handleClose">
            <!--            model表单数据-->
            <el-form  label-width="80px" :model="roleForm" :rules="roleFormRules" ref="roleFormRef">
                <el-form-item label="角色名" prop="roleName">
                    <el-input v-model="roleForm.roleName"></el-input>
                </el-form-item>
                <el-form-item label="备注" >
                    <el-input v-model="roleForm.remark"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                        <el-button @click="handleClose">取 消</el-button>
                        <el-button type="primary" @click="editRoleBtn">确 定</el-button>
                    </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "Role",
        data() {
            let validateAnotherRoleName = (rule, value, callback) => {
                //查询用户名是否重复
                this.$http.post(`/system/role/selRoleName`,this.roleForm).then(function (res) {
                    if (res && res.data.result.code == '0') {

                        callback()
                    } else if (res && res.data.result.code == '1') {
                        callback(new Error('角色已存在'))
                    }

                })
            }
            return {
                //条件搜索对象
                roleFormData: {},
                //表格数据
                tableData: [],
                //当前的显示的页码
                currentPage: 1,
                //每页显示的条数
                pageSize: 5,
                //总条数
                total: 0,
                //分配菜单弹出框显示
                fenMenuDialog: false,
                //角色具有的菜单
                roleMenuIds: [],
                //树形结构数据
                defaultProps: {
                    label: 'menuName',
                    children: 'sonList'},
                //分配菜单的角色ID
                roleId: 0,
                //所有菜单
                menus: {},
                //添加修改角色弹出框显示状态
                editRoleDialog:false,
                //添加修改角色信息
                roleForm:{},
                //角色表单校验数据
                roleFormRules:{
                    roleName:[{ required: true, message: '角色不可为空',trigger: 'blur'},
                        { validator: validateAnotherRoleName, trigger: 'blur'}]
                },

            }
        },
        created() {
            //获取角色信息
            this.initRoleTable();
        },
        methods: {
            initRoleTable() {
                //get方式不支持json数据
                var that = this;
                this.$http.post(`/system/role/sel/${this.currentPage}/${this.pageSize}`, this.roleFormData).then(function (resp) {
                    that.tableData = resp.data.result.tableData.records;
                    that.total = resp.data.result.tableData.total;
                });
            },
            //查询所有菜单和角色拥有的菜单
            showRoleMenu(roleId) {
                var that = this;
                this.roleId = roleId;
                this.$http.get(`/system/menu/sel/${roleId}`).then(function (resp) {
                    that.fenMenuDialog = true;
                    that.menus = resp.data.result.menus;
                    that.roleMenuIds = resp.data.result.roleMenuIds;
                    //默认选中的树的数据
                    setTimeout(() =>{
                        resp.data.result.roleMenuIds.forEach(value => {
                            that.$refs.menuTree.setChecked(value, true, false);
                        })}, 100)
                });
            },
            //确认分配菜单
            confirmFenMenu() {
                var that = this;
                // this.roleMenuIds = this.$refs.menuTree.getCheckedKeys().concat(this.$refs.menuTree.getHalfCheckedKeys());
                this.roleMenuIds=this.$refs.menuTree.getCheckedKeys().concat(this.$refs.menuTree.getHalfCheckedKeys());
                this.$http.get(`/system/menu/insMenu/${this.roleId}?roleMenus=`+this.roleMenuIds).then(function (resp) {
                    that.$message.success(resp.data.message);
                    that.fenMenuDialog = false;

                })
            },
            //当改变没有显示的条数时触发该方法
            handleSizeChange(v) {
                this.pageSize = v;
                this.initRoleTable();
            },
            //切换页码时触发该方法
            handleCurrentChange(v) {
                this.currentPage = v;
                this.initRoleTable();
            },
            //修改启用禁用状态
            switchStatus(roleId,status){
                this.$http.put(`/system/role/up/${roleId}/${status}`).then(function (re) {

                })
            },
            //添加修改角色信息
            editRoleBtn(){
                var that = this;

                this.$refs.roleFormRef.validate((valid)=>{
                    if(valid) {//valid表示校验通过
                        //进行id判断,如果id不为空则回显数据,走修改,如果id为空,则走添加

                        if(this.roleForm.roleId!=null) {
                            this.$http.put(`/system/role/updateRoleById`,this.roleForm).then(function (r) {
                                that.$message.success(r.data.message);
                                that.editRoleDialog=false;
                                that.initRoleTable();

                            })
                        }else{
                            this.$http.post(`/system/role/insertRole`,this.roleForm).then(function (r) {

                                that.$message.success(r.data.message);
                                that.editRoleDialog=false;
                                that.initRoleTable();

                            })
                        }
                        that.roelForm={};
                    }
                })
            },
            //修改回显
            selById(roleId){
                this.editRoleDialog=true;
                var that=this;
                this.$http.get(`/system/role/selById/${roleId}`).then(function (resp) {
                    that.roleForm=resp.data.result.roleInfo;
                })
            },
            //删除角色
            del(roleId){
                var that=this;
                this.$http.delete(`/system/role/del/${roleId}`).then(function (resp) {
                    that.$message.success("删除成功");
                    that.initRoleTable();
                    // location.reload();
                })
                this.currentPage=1;
            },
            handleClose(){
                this.editRoleDialog=false;
                this.$refs.roleFormRef.resetFields();
            }
        }
    }
</script>

<style scoped>

</style>